<template>
  <div>
    <!-- 头部栏 -->
    <van-nav-bar title="编辑地址"
                 left-arrow
                 @click-left="$router.go(-1)" />
    <!-- 编辑区 -->
    <van-address-edit :area-list="areaList"
                      show-delete
                      show-search-result
                      :address-info="editInfo"
                      :area-columns-placeholder="['请选择', '请选择', '请选择']"
                      @save="onSave"
                      @delete="onDelete" />
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { mapState } from 'vuex';
export default {
  name: 'editAddressPage',
  data () {
    return {
      areaList
    }
  },
  created () {
    console.log(this.id);
    this.getAddressDetail()
  },
  methods: {
    onSave (value) {
      console.log(value);
      this.$store.dispatch('address/addAddress', value)
      this.$router.replace('/address')
      this.$store.commit('address/clearEdit')
    },
    onDelete () {
      console.log('1');
    },
    getAddressDetail () {
      if (!this.id) return
      console.log('5');
      this.$store.dispatch('address/getAddressDetail', this.id)
    }
  },
  computed: {
    id () {
      return this.$route.query.addressId
    },
    ...mapState('address', ['editInfo'])
  }
}
</script>

<style>
</style>